<template>
	<view>
		<view class='my-order'>
			<u-sticky bgColor="#fff">
				<u-tabs :list="tabList" :scrollable="false" @change="tabChange"
				:activeStyle="{color: '#2393FF','font-size': '32rpx'}" :inactiveStyle="{color: '#D2D2D2','font-size': '28rpx'}"></u-tabs>
			</u-sticky>
			<view class='list'>
				<view class='item' v-for="(item,index) in orderList" :key="index">
					<view @click='goOrderDetails(item.id)'>
						<view class="topShop">
							<p class="orderNo">订单号：{{item.orderNo}}</p>
							<view class="orderType orangeColor" v-if="item.status=='2'">待发货</view>
							<view class="orderType redColor" v-if="item.status=='4'">待收货</view>
							<view class="orderType blueColor" v-if="item.status=='8'">已完成</view>
						</view>
						<view class="commodityBox" v-for="(items,index) in item.msqUserGoods" :key="index">
							<image class="image" :src="items.msqGoods.picture" mode=""></image>
							<view class="rightIntroduce">
								<p class="storeName">{{ items.productName }}</p>
								<view class="money flex-between">
									<view class="">
										<text class="icon">￥</text><text>{{ items.price }}</text>
									</view>
									<p class="num">x{{items.buyNumber}}</p>
								</view>
								<p class="introduce">下单时间:{{items.createTime}}</p>
							</view>
						</view>
					</view>
					<view class='bottom acea-row row-right row-middle'>
						<!-- <view class='bnt cancelBnt' @click='cancelOrder(item.payType,item.id)'>取消订单</view> -->
						<view class='confirmBtn' v-if="item.status!='8'" @click='cancelOrder(item.payType,item.id)'>确认收货</view>
					</view>
				</view>
			</view>
			<view class='loadingicon acea-row row-center-wrapper' v-if="orderList.length>0">
				<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
			</view>
			<view v-if="orderList.length == 0">
				<emptyPage title="暂无订单~"></emptyPage>
			</view>
		</view>
		<!-- <view class='noCart' v-if="orderList.length == 0 && pageNum > 1">
			<view class='pictrue'>
				<image src='@/static/images/noOrder.png'></image>
			</view>
		</view> -->
		<home></home>
		<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id"
			:totalPrice='totalPrice'></payment>
	</view>
</template>
<script>
	// orderData,
	import {
		getOrderList,
		orderCancel,
		orderDel,
		postCreateOrder
	} from '@/api/order.js';
	import {
		openOrderSubscribe
	} from '@/utils/SubscribeMessage.js';
	import home from '@/components/home';
	import payment from '@/components/payment';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'

	export default {
		components: {
			payment,
			home,
			emptyPage,
			// #ifdef MP
			authorize
			// #endif
		},
		data() {
			return {
				tabList: [{
					name: '全部',
					value:null
				}, {
					name: '待发货',
					value:"2"
				}, {
					name: '待收货',
					value:"4"
				}, {
					name: '已完成',
					value:"8"
				}],
				loading: false, //是否加载中
				loadend: false, //是否加载完毕
				loadTitle: '加载更多', //提示语
				orderList: [], //订单数组
				// orderData: {}, //订单详细统计
				orderStatus: null, //订单状态
				pageNum: 1,
				pageSize: 20,
				payMode: [{
						name: "微信支付",
						icon: "icon-weixinzhifu",
						value: 'weixin',
						title: '微信快捷支付'
					},
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'yue',
						title: '可用余额:',
						number: 0
					}
				],
				pay_close: false,
				pay_order_id: '',
				totalPrice: '0',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false //是否隐藏授权
			};
		},
		computed: mapGetters(['isLogin', 'userInfo']),
		onShow() {
			this.orderStatus = null
			if (this.isLogin) {
				this.loadend = false;
				this.pageNum = 1;
				this.$set(this, 'orderList', []);
				// this.getOrderData();
				this.getOrderList();
				this.payMode[1].number = this.userInfo.nowMoney;
				this.$set(this, 'payMode', this.payMode);
			} else {
				toLogin();
			}
		},
		methods: {
			// tab切换
			tabChange(e){
				this.statusClick(e.value)
			},
			onLoadFun() {
				// this.getOrderData();
				this.getOrderList();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			/**
			 * 事件回调
			 * 
			 */
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				(action && this[action]) && this[action](value);
			},
			/**
			 * 关闭支付组件
			 * 
			 */
			payClose: function() {
				this.pay_close = false;
			},
			/**
			 * 生命周期函数--监听页面加载
			 */
			onLoad: function(options) {
				if (options.status) this.orderStatus = options.status;
			},
			/**
			 * 获取订单统计数据
			 * 
			 */
			// getOrderData: function() {
			// 	let that = this;
			// 	orderData().then(res => {
			// 		that.$set(that, 'orderData', res.data);
			// 	})
			// },
			/**
			 * 取消订单
			 * 
			 */
			cancelOrder: function(payType, order_id) {
				let that = this;
				orderCancel({
					id: order_id,
					payType: "3"
				}).then(res => {
					console.log(res, "res")
					return that.$util.Tips({
						title: '取消成功',
						icon: 'success'
					})
					this.getOrderList();
				})
			},
			/**
			 * 打开支付组件
			 * 
			 */
			goPay(pay_price, order_id) {
				console.log(pay_price, order_id, "pay_price, order_id")
				let array = {
					yhqId: null,
					tradeType: 0,
					purchaseInformationVos: [{
						specificationId: order_id,
						buyCount: pay_price
					}]
				};
				postCreateOrder(array).then(res => {
					this.payParams = res.data
					this.$util.Tips({
						title: "下单成功"
					});
					this.getOrderData()
				})
			},
			/**
			 * 支付成功回调
			 * 
			 */
			pay_complete: function() {
				this.loadend = false;
				this.pageNum = 1;
				this.$set(this, 'orderList', []);
				this.$set(this, 'pay_close', false);
				this.getOrderData();
				this.getOrderList();
			},
			/**
			 * 支付失败回调
			 * 
			 */
			pay_fail: function() {
				this.pay_close = false;
			},
			/**
			 * 去订单详情
			 */
			goOrderDetails: function(order_id) {
				uni.navigateTo({
					url: '/pages/addOrder/orderDetail?orderId=' + order_id
				});
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.orderStatus) return;
				this.orderStatus = status;
				this.loadend = false;
				this.pageNum = 1;
				this.$set(this, 'orderList', []);
				this.getOrderList();
			},
			/**
			 * 获取订单列表
			 */
			getOrderList: function() {
				let that = this;
				if (that.loadend) return;
				if (that.loading) return;
				that.loading = true;
				that.loadTitle = "加载更多";
				getOrderList({
					status: that.orderStatus,
					pageNum: that.pageNum,
					pageSize: that.pageSize,
				}).then(res => {
					let list = res.data.records || [];
					let loadend = list.length < that.pageSize;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? "我也是有底线的" : '加载更多';
					that.pageNum = that.pageNum + 1;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = "加载更多";
				})
			},

			/**
			 * 删除订单
			 */
			delOrder: function(order_id, index) {
				let that = this;
				orderDel(order_id).then(res => {
					that.orderList.splice(index, 1);
					that.$set(that, 'orderList', that.orderList);
					that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
					that.getOrderData();
					return that.$util.Tips({
						title: '删除成功',
						icon: 'none'
					});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
		},
		onReachBottom: function() {
			this.getOrderList();
		}
	}
</script>
<style scoped lang="scss">
	.my-order {
		.nav {
			background-color: #fff;
			width: 100%;
			// height: 86rpx;

			.item {
				text-align: center;
				font-size: 28rpx;
				color: #D2D2D2;
				padding: 6rpx 0;

				&.on {
					font-weight: bold;
					color: #2393FF;
					font-size: 32rpx;
					border-bottom: 8rpx solid #2393FF;
				}
			}
		}

		.list {
			width: 690rpx;
			margin: 24rpx 32rpx;

			.item {
				background-color: #fff;
				border-radius: 14rpx;
				margin-bottom: 26rpx;
				padding: 0 24rpx;
				.topShop {
					width: 100%;
					padding: 24rpx 0rpx;
					display: flex;
					justify-content: flex-start;
					flex-wrap: nowrap;
					border-bottom: 2rpx solid rgba(204,204,204,0.1569);
					.orderNo,
					.shopName {
						width: 500rpx;
						font-weight: 600;
						color: #28314C;
						text-align: left;
					}

					.orderType {
						width: 120rpx;
						font-weight: 400;
						font-size: 20rpx;
						color: #4776F8;
						text-align: right;
					}
				}

				.commodityBox {
					background: #FFFFFF;
					padding: 30rpx 0rpx 24rpx;
					border-bottom: 1rpx solid #eee;
					display: flex;
					justify-content: flex-start;
					flex-wrap: nowrap;

					.image {
						width: 186rpx;
						height: 186rpx;;
						border-radius: 8rpx;
					}

					.rightIntroduce {
						width: 460rpx;
						height: 168rpx;
						margin-left: 22rpx;

						.storeName {
							font-size: 28rpx;
							color: #28314C;
							margin-bottom: 40rpx;
						}

						.introduce {
							font-size: 24rpx;
							color: #28314C;
							margin-top: 6rpx;
						}

						.money {
							;
							font-weight: 700;
							font-size: 60rpx;
							color: #F9423A;
						}
						.num{
							color: #28314C;
							;
							font-weight: 700;
							font-size: 40rpx;
						}
						.icon{
							font-size: 26rpx;
							font-weight: 700;
						}

						.totalPrice {
							font-size: 26rpx;
							color: #282828;
							text-align: right;

							.money {
								font-size: 28rpx;
								font-weight: bold;
								color: #000;
							}
							
						}
					}
				}

				.bottom {
					padding: 24rpx 0 22rpx;
					.bnt {
						width: 112rpx;
						height: 48rpx;
						text-align: center;
						line-height: 48rpx;
						color: #fff;
						border-radius: 50rpx;
						font-size: 22rpx;

						&.cancelBnt {
							border: 1rpx solid #ddd;
							color: #aaa;
						}
					}
				}
			}

			.loadingicon {
				.loading {
					&.iconfont.icon-jiazai {
						/* The visibility is controlled by JavaScript */
					}
				}
			}
		}

		.noCart {
			margin-top: 171rpx;
			padding-top: 0.1rpx;

			.pictrue {
				width: 414rpx;
				height: 336rpx;
				margin: 78rpx auto 56rpx auto;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.confirmBtn{
		width: 144rpx;
		height: 58rpx;
		line-height: 58rpx;
		text-align: center;
		background: #0077FF;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #FFFFFF;
	}
	.orangeColor{
		color: #FEA21D;
	}
	.blueColor{
		color: #2393FF;
	}
	.redColor{
		color: #FF3223;
	}
</style>